<template>
  <div>
    <el-container>
      <el-main>
        <div class="contentShadow">
          <h1>学生比赛成果</h1>
          <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
          </el-radio-group>
          <el-descriptions class="des" direction="vertical" :column="4" :size="size" border>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-s-promotion"></i>
                名称
              </template>
              {{ competition.competitionName }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template slot="label">
                <i class="el-icon-magic-stick"></i>
                奖项
              </template>
              {{ competition.award }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template slot="label">
                <i class="el-icon-paperclip"></i>
                级别
              </template>
              <el-tag type="warning" :size="size">
                <template v-if="competition.level === 1">校级</template>
                <template v-else-if="competition.level === 2">市级</template>
                <template v-else-if="competition.level  === 3">省级</template>
                <template v-else-if="competition.level  === 4">省级</template>
                <template v-else-if="competition.level  === 5">其它</template>
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-user-solid"></i>
                姓名
              </template>
              <el-tag type="success" :size="size">{{ competition.name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-user"></i>
                学号
              </template>
              <el-tag type="main" :size="size">{{ competition.studentId }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
              <template slot="label">
                <i class="el-icon-s-custom"></i>
                主办方
              </template>
              {{ competition.sponsor }}
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template slot="label">
                <i class="el-icon-date"></i>
                获奖日期
              </template>
              <el-tag type="danger" :size="size">{{ competition.date }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item :span="1">
              <template slot="label">
                <i class="el-icon-location"></i>
                地点
              </template>
              {{ competition.spot }}
            </el-descriptions-item>
            <el-descriptions-item :span="4">
              <template slot="label">
                <i class="el-icon-document"></i>
                描述
              </template>
              {{ competition.description }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-main>
    </el-container>
  </div>
</template>


<style scoped>
.des {
  font-size: larger;
}
</style>
<script>
import {findCompetitionDetail} from "@/api/admin";

export default {
  data() {
    return {
      size: '',
      competition: {
        competitionId: 0,
        competitionName: "这里是比赛名称",
        award: "这里是奖项",
        level: "这里是级别",
        sponsor: "这里是主办方",
        date: "这里是获奖日期",
        spot: "这里是地点",
        description: "这里是描述",
        studentId: "2200012345",
        name: "张三",
      },
    }
  },
  mounted() {
    this.competition.competitionId = Number(window.location.search.substring(4));
    console.log("1234567890")
    findCompetitionDetail(this.competition.competitionId).then(res => {
      this.competition = res.data
    })
  },
  methods: {}
}
</script>
